import {Form, Button, Dialog, Loading} from '@antmjs/vantui'
import {View, ScrollView} from "@tarojs/components";
import {useCallback, useEffect, useRef, useState} from 'react';
import Taro, {useRouter} from '@tarojs/taro';
import Utils from "@/utils/common";
import LogUtils from "@/utils/log";
import {DynamicFormData} from "@/common/types";
import { otherListApi} from "@/common/apis/home_datasource";
import DynamicFormV2 from "@/components/DynamicFormV2";
import './more_options.less'



definePageConfig({
  navigationBarTitleText: '更多选项',
})


// --- Component ---
const Dialog_ = Dialog.createOnlyDialog()

export default function MoreOptions() {
  const router = useRouter();
  const form = Form.useForm();

  const [loading, setLoading] = useState(true);
  const [formConfig, setFormConfig] = useState<any[]>([]);
  const eventChannel = useRef<Taro.EventChannel | null>();
  const defaultValues = useRef<DynamicFormData>();

  const [, setRefresh] = useState({})

  const otherListApiInfo = useCallback(() => {
    if (defaultValues.current && defaultValues.current?.id) {
      otherListApi(defaultValues.current?.id).then((res) => {
        if (res) {
          const formConfig2 =  Utils.transformApiDataToFormConfig(res,true)
          setFormConfig(formConfig2)
        }
        setLoading(false);
        //延迟调用
        setTimeout(() => {
          form.setFields(defaultValues.current!)
          setRefresh({})
          LogUtils.info('defaultValues', defaultValues.current)
        }, 500)
      })
    }
  }, [form]);

  useEffect(() => {
    const instance = Utils.getI();
    const params = Utils.getParamsByRouter(instance)
    eventChannel.current = Utils.getChannel(instance)
    if (params && params.data) {
      defaultValues.current = Utils.getObjectWithUrl<DynamicFormData>(params.data)
    }
    otherListApiInfo()

  }, [form, otherListApiInfo, router.params]);

  const handleSubmit = useCallback(() => {
    // ... handleSubmit 逻辑保持不变
    form.validateFields((errors, values) => {
      if (!errors || errors.length === 0) {
        Utils.emit(eventChannel.current, 'projectBookMoreOptions', values)
        Utils.navigateBack({
          delta: 1 // Go back one page
        })
      }
    });
  }, [form]);

  if (loading) {
    return (
      <View style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
        <Loading type="spinner" size="24px">加载中...</Loading>
      </View>
    );
  }
  const bottomBarHeight = 80;
  return (
    <View style={{height: '100vh', display: 'flex', flexDirection: 'column', backgroundColor: '#f7f8fa'}}>
      <Dialog_/>
      <ScrollView scrollY
                  style={{flex: 1, height: '0', paddingBottom: `${bottomBarHeight}px`, boxSizing: 'border-box'}}>
      <DynamicFormV2
        form={form}
        formConfigs={formConfig}
      />
      </ScrollView>
      {/*<View*/}
      {/*  style={{*/}
      {/*    position: 'fixed',*/}
      {/*    bottom: 0,*/}
      {/*    left: 0,*/}
      {/*    right: 0,*/}
      {/*    height: `${bottomBarHeight}px`,*/}
      {/*    padding: '15px 20px',*/}
      {/*    boxSizing: 'border-box',*/}
      {/*    backgroundColor: '#ffffff',*/}
      {/*    borderTop: '1px solid #ebedf0',*/}
      {/*    zIndex: 100,*/}
      {/*    paddingBottom: `calc(15px + env(safe-area-inset-bottom))`*/}
      {/*  }}*/}
      {/*>*/}
      {/*  <Button*/}
      {/*    block*/}
      {/*    type="info"*/}
      {/*    onClick={handleSubmit}*/}
      {/*  >保存*/}
      {/*  </Button>*/}
      {/*</View>*/}
    </View>
  )
}
